import React, { useState, useEffect } from 'react';
import { withRouter, useLocation } from 'react-router-dom';
import { Menu, Button, Icon } from 'antd';
import umbrella from 'umbrella-storage';
// import hot from '@/style/imgs/hot.png';
import logo from '@/style/imgs/logo.jpg';
import style from './index.module.less';
import CountTo from '../../components/countTo/index';

const titleList = [
    { title: '我们将始终' },
    { title: '秉承着对您负责任的' },
    { title: '服务理念，确保您' },
    { title: '的付出一定能获得应有的回报，' },
    { title: '并将以最专业的' },
    { title: '服务，回馈您的信任！' },
];
const HeaderMenu = (props: any) => {
    const location = useLocation();
    const [defaultMenu, setDefaultMenu] = useState<string[]>(['home']);
    useEffect(() => {
        // 在这里处理路由变化的逻辑
        switch (location.pathname) {
            case '/app/home/index':
                setDefaultMenu(() => ['home']);
                break;
            case '/app/advantage/index':
                setDefaultMenu(() => ['1']);
                break;

            case '/app/pinggu/index':
                setDefaultMenu(() => ['1-1']);
                break;
            case '/app/plish/index':
                setDefaultMenu(() => ['1-2']);
                break;
            case '/app/translate/index':
                setDefaultMenu(() => ['1-3']);
                break;
            case '/app/support/index':
                setDefaultMenu(() => ['1-4']);
                break;
            case '/app/polishZh/index':
                setDefaultMenu(() => ['1-5']);
                break;

            case '/app/editTeam/index':
                setDefaultMenu(() => ['2']);
                break;
            case '/app/publishCase/index':
                setDefaultMenu(() => ['3-3']);
                break;

            case '/app/medicalHotspots/index':
                setDefaultMenu(() => ['3-4']);
                break;
            case '/app/frequentlyAsk/index':
                setDefaultMenu(() => ['4']);
                break;
            default:
                setDefaultMenu(() => ['4']);
                break;
        }
    }, [location.pathname]);

    const userLogin = umbrella.getLocalStorage('userLogin') || false;
    const [isScroll, setIsScroll] = useState<boolean>(false);
    // 菜单选中事件
    function handleSelect({ item, key, keyPath, selectedKeys, domEvent }: any) {
        switch (key) {
            case 'home':
                pageToLink('/app/home/index');
                break;

            case '1-1':
                pageToLink('/app/pinggu/index');
                break;
            case '1-2':
                pageToLink('/app/plish/index');
                break;
            case '1-3':
                pageToLink('/app/translate/index');
                break;
            case '1-4':
                pageToLink('/app/support/index');
                break;
            case '1-5':
                pageToLink('/app/polishZh/index');
                break;

            case '1':
                pageToLink('/app/advantage/index');
                break;
            case '2':
                pageToLink('/app/editTeam/index');
                break;
            case '3-2':
                pageToLink('/app/publishCase/index?type=2');
                break;
            case '3-3':
                pageToLink('/app/publishCase/index?type=3');
                break;
            case '3-4':
                pageToLink('/app/medicalHotspots/index');
                break;
            case '4':
                pageToLink('/app/frequentlyAsk/index');
                break;
            default:
                break;
        }
    }
    // 路由跳转
    function pageToLink(path: string) {
        props.history.push(path);
        // const baseUrl = document.URL.split("/#/")[0];
        // window.open(baseUrl + "/#" + path);
    }
    // 跳转到首页
    function handleHome() {
        pageToLink('/app/home/index');
    }

    // 跳转到登录页
    function handleLogin() {
        pageToLink('/login');
    }

    return (
        <div className={style.header}>
            <div className={style.logo} onClick={handleHome}>
                <div className={style.header_logo}>
                    <img src={logo} alt="图片加载失败" />
                    <span className={style.title}>万方寰宇</span>
                    <div className={style.headerDescribe}>为祖国医学的发展尽我们所能!</div>
                </div>
            </div>
            <div className={style.header_right}>
                <div className={`${style.header_content} ${isScroll ? style.is_scroll : ''}`}>
                    {/* 文字滚动 */}
                    <CountTo list={titleList} />
                    {/* <Button type="primary">登录/注册</Button> */}
                </div>
                <nav className={style.header_menu}>
                    <Menu
                        mode="horizontal"
                        defaultSelectedKeys={['home']}
                        selectedKeys={defaultMenu}
                        onClick={handleSelect}
                    >
                        <Menu.Item key="home">
                            <Icon type="home" />
                            首页
                        </Menu.Item>
                        <Menu.Item key="1">
                            <Icon type="appstore" />
                            服务优势
                        </Menu.Item>
                        {/* <Menu.SubMenu
            key="55"
            title={
              <span className="submenu-title-wrapper">
                <Icon type="appstore" />
                服务内容
              </span>
            }
          >
            <Menu.Item key="1-1">
              <Icon type="snippets" />
              预审评估服务
            </Menu.Item>
            <Menu.Item key="1-2">
              <Icon type="form" />
              润色编辑服务
            </Menu.Item>
            <Menu.Item key="1-3">
              <Icon type="file-search" />
              学术翻译服务
            </Menu.Item>
            <Menu.Item key="1-4">
              <Icon type="edit" />
              发表支持服务
            </Menu.Item>
            <Menu.Item key="1-5">
              <Icon type="highlight" />
              中文润色服务
            </Menu.Item>
          </Menu.SubMenu> */}
                        {/* <Menu.Item key="2">
          <span>优惠活动</span>
          <img className={style["menu-right"]} src={hot} alt="图片加载失败" />
          </Menu.Item> */}
                        <Menu.Item key="2">
                            <Icon type="form" />
                            润色示例
                        </Menu.Item>
                        {/* <Menu.SubMenu key="3" title="发表案例">
            <Menu.Item key="3-1">
            发表案例
          </Menu.Item>
            <Menu.Item key="3-2">
              致谢案例
            </Menu.Item>
            <Menu.Item key="3-3">
              客户好评
            </Menu.Item>
          </Menu.SubMenu> */}
                        {/* <Menu.Item key="3-2">
                            <Icon type="like" />
                            致谢案例
                        </Menu.Item> */}
                        <Menu.Item key="3-3">
                            <Icon type="smile" />
                            用户好评
                        </Menu.Item>

                        <Menu.Item key="3-4">
                            <Icon type="fire" />
                            医学热点
                        </Menu.Item>
                        <Menu.Item key="4">
                            <Icon type="question-circle" />
                            常见问题
                        </Menu.Item>
                    </Menu>
                </nav>
                {!userLogin && (
                    <Button type="primary" className={style.login_btn} onClick={handleLogin}>
                        登录
                    </Button>
                )}
            </div>
        </div>
    );
};

export default withRouter(HeaderMenu);
